import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '@/components/Index'
import User from "@/components/User.vue";
import Order from "@/components/Order.vue";
import Search from "@/components/route-param-label/Search.vue";
import Goods from "@/components/route-param-label/Goods.vue";
import Register from "@/components/route-param-label/Register.vue";
import Like from "@/components/route-param-code/Like.vue";
import Rank from "@/components/route-param-code/Rank.vue";
import ShopCart from "../components/route-param-code/ShopCart.vue";
import Trade from "../components/route-param-code/Trade.vue";
import Student from "../components/navigationDuplicated/Student.vue";
import AddStudent from "../components/navigationDuplicated/AddStudent.vue";
import MyDirective from "../components/directive/MyDirective.vue";

Vue.use(VueRouter)

// // 打印路由对象
console.log(VueRouter);
// // 打印路由对象的原型对象
// console.log(VueRouter.prototype);

let originPush = VueRouter.prototype.push;

//第一个参数: 告诉原来push 方法，你往哪里跳转(传递哪些参数)
VueRouter.prototype.push = function (location, resolve, reject) {
  // 这里的this就是路由对象
  console.log(this);
  if (resolve && reject) {
    //originPush：利用call修改上下文，变为(路由组件.$router)这个对象，第二参数：配置对象、第三、第四个参数：成功和失败回调函数
    // call和apply之间的联系, 相同点: 都可以作为路由跳转的拦截器, 重写函数. 不同点在于call传递参数用逗号隔开,apply方法执行需要传递数组
    originPush.call(this, location, resolve, reject);
  } else {
    originPush.call(
      this,
      location,
      () => {
      },
      () => {
      }
    );
  }
};

//重写VueRouter.prototype身上的replace方法了
let originReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function (location, resolve, reject) {
  if (resolve && reject) {
    originReplace.call(this, location, resolve, reject);
  } else {
    originReplace.call(
      this,
      location,
      () => {
      },
      () => {
      }
    );
  }
};

export default new VueRouter({
  routes: [
    {
      path: '/index',
      name: 'Index',
      component: Index,
      meta: {
        show: false,
      }
    },
    {
      path: '/user',
      name: 'User',
      component: User,
      meta: {
        show: false
      }
    },
    {
      path: '/order',
      name: 'Order',
      component: Order,
      meta: {
        show: false
      }
    },
    // 所有对象都必须在路由中注册
    {
      path: '/search',
      name: 'Search',
      component: Search,
    },
    {
      path: '/goods',
      name: 'Goods',
      component: Goods
    },
    {
      path: '/register/:name/:age',
      name: 'Register',
      component: Register
    },
    {
      path: '/like',
      name: 'Like',
      component: Like,
      meta: {
        show: true
      }
    },
    {
      path: '/rank',
      name: 'Rank',
      component: Rank,
      meta: {
        show: true
      }
    },
    {
      // 在占位符后面加上？表示这个变量为可选参数，可以不传，也可以传
      path: '/shopCart/:name?/:age?',
      name: 'ShopCart',
      component: ShopCart,
      meta: {
        show: true
      }
    },
    {
      path: '/trade/:name?',
      name: 'Trade',
      component: Trade,
      meta: {
        show: true
      },
      // 一般通过路由组件传参给目标组件的props很少，只需要作为了解即可
      // 第一种写法：开启props传参, 注意：只能将路由的params类型的参数作为props让目标组件接收
      // props: true,

      //   第二中写法：对象写法
      //   props:{name:'左宗棠'}

      //   第三种写法：函数写法，可以将$route中的params参数，query参数通过props传递给路由组件
      props: (route) => {
        return {name: route.params.name, age: route.query.age};
      }
    },
    {
      path: '/student',
      name: 'Student',
      component: Student,
      children: [
        {
          path: '/add',
          name: 'AddStudent',
          component: AddStudent,
        }
      ],
      meta: {
        show: false
      }
    },
    {
      path: '/directive',
      name: 'MyDirective',
      component: MyDirective,
      meta: {
        show: true
      }
    },
  ]
})
